<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-delete" @click="deletelist">删除</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="records"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column fixed prop="globalId" label="ID" sortable="custom" align="center" width="60" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="parameName" label="参数名" width="120px" align="center" :show-overflow-tooltip='true'>
        <template slot-scope="{row}">
           <span class="link-type" @click="update(row.globalId)">{{ row.parameName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="parameType" label="参数类型" width="100px" align="center">
      </el-table-column>
      <el-table-column prop="isRequired" label="是否必填" width="100px" align="center">
      </el-table-column>
      <el-table-column prop="defaultValue" label="默认值" :show-overflow-tooltip='true' min-width="110px" align="center">
      </el-table-column>
      <el-table-column prop="globalState" label="状态" width="100px" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.globalState | statusFilter">
            {{ row.globalState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="100px" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="100px" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column prop="lastupdateTime" label="修改时间" min-width="100px" align="center" :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button @click="update(scope.row.globalId)" type="primary" size="mini">编辑</el-button>
          <el-button @click="deleteone(scope.row.globalId)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="pagesizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import { getFindType, autoGlobalAdd,autoGlobalDelete,autoGlobalGet,autoGlobalPut,autoGlobalList} from '@/api/autoGlobal'
  export default {
      name:"AutoGlobal",
      directives: { waves },
      filters: {
        statusFilter(status) {
          const statusMap = {
            0: 'success',
            1: 'info'
          }
          return statusMap[status]
        },
        typeFilter(type) {
          return calendarTypeKeyValue[type]
        }
      },
      data(){
        return{
          tableKey:0,
          listLoading: true,
          current: 1,
          size: 10,
          total: 0,
          pagesizes: [10, 20, 50, 100],
          records: [],
          paramtype:[],
          formLabelWidth:'120px',
          isRequiredTest:[
            {"key":"必传",
            "value":0},
            {"key":"非必传",
            "value":1}
          ],
          globalStateList:[
            {"key":"启用",
            "value":0},
            {"key":"未启用",
            "value":1}
          ]
        }
      },
      methods: {
        //条数变更
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.findAll(val, this.current)
        },
        //页码变更
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.findAll(this.size, val)
        },
        //查询页面
        findAll(size, current){
          this.listLoading = true
          autoGlobalList({
            current: current,
            size: size
          }).then(resp=>{
              this.total = resp.data.total;
              this.current = resp.data.current;
              this.size = resp.data.size;
              this.records=resp.data.records;
              for(var i=0;i<this.records.length;i++){
                if(this.records[i].parameType==this.paramtype[0].value){
                  this.records[i].parameType=this.paramtype[0].label
                }else{
                   this.records[i].parameType=this.paramtype[1].label
                }
                if(this.records[i].isRequired==0){
                  this.records[i].isRequired="必填"
                }else{
                  this.records[i].isRequired="非必填"
                }
                if(this.records[i].globalState==0){
                  this.records[i].globalState="启用"
                }else{
                  this.records[i].globalState="未启用"
                }
              }
             setTimeout(() => {
               this.listLoading = false
             }, 1.5 * 1000)
          })
        },
        //查询请求类型
        findType(){
          getFindType().then(resp=>{
              this.paramtype=resp.data;
          })
        },
        add(){
          this.$router.push({
              name:"autoGlobalFrom",
              query:{isAdd:true}
          });
        },
        //删除全局参数
        deleteone(id){
          var ids=[];
          ids.push(id);
          var AutoGlobalDeleteFrom={};
          AutoGlobalDeleteFrom.globalIdList=ids;
          autoGlobalDelete(AutoGlobalDeleteFrom).then(resp=>{
              this.$message({
                        message: resp.msg,
                        type: 'success'
                      });
              this.findAll(this.size,this.current);
          })
        },
        //多选删除
        deletelist(){
          var ids=[];
          this.$refs.multipleTable.selection.forEach(item => {
            ids.push(item.globalId);
          });
          var AutoGlobalDeleteFrom={};
          AutoGlobalDeleteFrom.globalIdList=ids;
          autoGlobalDelete(AutoGlobalDeleteFrom).then(resp=>{
              this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
              this.findAll(this.size,this.current);
          })
        },
        //查看编辑页面
        update(globalId){
          this.$router.push({
              name:"autoGlobalFrom",
              query:{isAdd:false,globalId:globalId}
          });
        },
        sortChange(data) {
          const { prop, order } = data
          if (prop === 'id') {
            this.sortByID(order)
          }
        }
      },
      created() {
        this.findType();
        this.findAll(this.size, this.current);
      }
    }
</script>

<style>
  .paginationClass {
      position: fixed;
      bottom: 0;
      height: 40px;
      width: 100%;
      text-align: center;
  }
</style>
